<template>
    <el-button title="编辑" @click="editClass" ><el-icon><EditPen /></el-icon></el-button>
    <el-dialog v-model="dialogFormVisible" title="Updata Class Information">
    <el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="80px"
    size="default" @submit.prevent>
    <el-row>
      <el-col :span="12" class="grid-cell">
        <el-form-item :label="$t('class.privacy')" prop="privacy">
          <el-radio-group v-model="formData.privacy">
            <el-radio v-for="(item, index) in privacyOptions" :key="index" :label="item.value"
              :disabled="item.disabled" style="{display: inline}">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('class.classname')" prop="classname">
          <el-input v-model="formData.className" type="text" clearable></el-input>
        </el-form-item>
        <el-form-item :label="$t('class.classsize')" prop="classNumber">
          <el-input v-model="formData.classNumber" type="text" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12" class="grid-cell">
        <el-form-item :label="$t('class.addcover')" prop="cover">
          <el-input v-model="formData.cover" type="text" clearable></el-input>
        </el-form-item>
      </el-col>  
    </el-row>
    <el-form-item :label="$t('class.classprofile')" prop="classprofile">
      <el-input type="textarea" v-model="formData.classprofile" rows="3"></el-input>
    </el-form-item>
    <div class="static-content-item">
      <div>班主任</div>
    </div>
    <el-transfer
    v-model="tearcherSelect"
    :data="tearcherData"
    :titles="['All', 'Designate']"
  />
  </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { EditPen } from '@element-plus/icons-vue';
import { reactive, ref } from 'vue'
 export default {
 name: '',
 components:{
    EditPen,
 },
 setup(){
    const dialogFormVisible = ref(false)
    return{
        dialogFormVisible
    }
   },
 data: function(){
 return {
    dialogVisible:false,
    formData: {
             privacy:"null",
             classId:"",
             className:"",
             picture: null,
             creatTime:"",
             classNumber:"",
            //  classprofile: "",
            teacher: "",
          },
          privacyOptions: [{
            "label": "公开班级",
            "value": 1
          }, {
            "label": "私密班级",
            "value": 0
          }],
          tearcherData:[
            {key:'',label:''},
           ],
           tearcherSelect:[]
 }
 },
 methods:{
    editClass(){
        this.dialogFormVisible = true;
  },
    editClassBtn(){
        var that = this;
        window.http.post('/api/classes/edit',this.formData).then(res => {
            console.info(JSON.stringify(res));
            var data = res.data;
            if(data.success){
                that.$message.success(data.msg);
                that.$emit("reback");
                that.dialogVisible = false;
            }else{
                that.$message.error(data.msg);
            } 
        })
        .catch(function(error){
            that.$message.error("服务器异常")
        });
  },
  // query(){
  //   var that = this;
  //   window.http.post('/api/Class/query',{}).then(res => {
  //            console.info(res);
  //            var data = res.data;
  //            that.tearcherData = data;
  //            console.log(this.tearcherData);
  //        });
  //  }
 }
 }
</script>
<style>
html,
 body, 
 #app{
 height: 100%;
 }
</style>
<style scoped>
 .container {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 100%;
 }
 .tr{
 width: 200px;
 flex-basis: 50px;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 background-color: beige;
 align-items: center;
 }
 .second{
 background-color: aqua;
 }

</style>
